<script setup lang="ts">
import { ref } from 'vue';
import { Md5 } from 'ts-md5';
import { useStore } from '@/store';
import { postLogin } from '@/services/login';

const useInfoStore = useStore();
const formRef = ref();
const checked = ref(false);
const formData = ref({
  username: '',
  password: '',
});

// 自定义校验规则
const rules = {
  username: {
    rules: [{ required: true, errorMessage: '请输入账号' }],
  },
  password: {
    rules: [{ required: true, errorMessage: '请输入密码' }],
  },
};

const login = async () => {
  try {
    const { data } = await postLogin({
      userName: '18022409045',
      password: Md5.hashStr('YEgoo666888'),
    });
    useInfoStore.setUserInfo(data.customer);
    uni.navigateBack();
    uni.showToast({ icon: 'success', title: '登录成功' });
  } catch (error) {
    // 错误处理
  }
};

// 提交表单
const submitForm = async () => {
  if (!checked.value) {
    uni.showToast({ icon: 'none', title: '请勾选同意协议' });
    return;
  }
  formRef.value
    .validate()
    .then((res: any) => {
      login();
    })
    .catch((err: any) => {});
};
</script>

<template>
  <view class="viewport">
    <view class="logo">
      <image
        src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/logo_icon.png"
      ></image>
    </view>
    <view class="login">
      <!-- 网页端表单登录 -->
      <uni-forms ref="formRef" :model="formData" :rules="rules">
        <!-- 用户名输入 -->
        <uni-forms-item label="用户名" name="username">
          <uni-easyinput v-model="formData.username" placeholder="请输入用户名" />
        </uni-forms-item>

        <!-- 密码输入 -->
        <uni-forms-item label="密码" name="password">
          <uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
        </uni-forms-item>

        <button @click="submitForm" type="primary">登录</button>
      </uni-forms>

      <view class="tips">
        <radio @click="checked = !checked" :checked="checked" />
        <view style="display: flex; flex-wrap: wrap">
          我已阅读并同意
          <navigator style="color: red" url="/pagesClause/clause/clause" hover-class="none">
            《耶购网上医疗器械平台服务协议》
          </navigator>
          <text>和</text>
          <navigator style="color: red" url="/pagesClause/policy/policy" hover-class="none">
            《耶购网上医疗器械平台隐私政策》
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
}

//选中之后的样式
::v-deep .wx-radio-input.wx-radio-input-checked {
  background-color: rgba(23, 194, 194) !important;
  border-color: rgba(23, 194, 194) !important;
  background-clip: content-box !important;
  padding: 6rpx !important;
  width: 30rpx !important;
  height: 30rpx !important;
  box-sizing: border-box;
  border-radius: 50%;
}

//未选中样式
::v-deep .wx-radio-input {
  padding: 6rpx !important;
  width: 30rpx !important;
  height: 30rpx !important;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: white !important;
  border-color: rgba(204, 208, 214) !important;
}

//去除默认对号
::v-deep .wx-radio-input::before {
  display: none !important;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20rpx 40rpx;
}

.logo {
  flex: 1;
  text-align: center;

  image {
    width: 220rpx;
    height: 220rpx;
    margin-top: 15vh;
  }
}

.login {
  display: flex;
  flex-direction: column;
  height: 60vh;
  padding: 40rpx 20rpx 20rpx;
}

.tips {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 80rpx;
  left: auto;
  right: auto;
  font-size: 22rpx;
  color: #999;
}
</style>
